<template>
  <view class="info_content">
    <!-- 热门 -->
    <view class="info_hot">
      <view class="hot_title flex">
        <image src="/static/mf/home/hot.png" class="hot_icon" />
        {{ $t("mf.home.hot") }}
      </view>
      <view class="hot_box flex">
        <block v-for="(item, index) in articleHot.data" :key="index">
          <view class="flex1 hot_item" @click="artcleDetail(item.id)">
            <image :src="item.image" class="hot_item_img" mode="aspectFill" />
            <view class="hot_item_title">{{ item.title }}</view>
          </view>
        </block>
      </view>
    </view>
    <!-- 资讯 -->
    <view class="info_list">
      <block v-for="(item, index) in articleList.data" :key="index">
        <view class="info_item flex" @click="artcleDetail(item.id)">
          <view class="info_item_left flex1">
            <view class="info_item_title">{{ item.title }}</view>
            <view class="info_item_info flex">
              <!-- <view class="info_top" v-if="item.top">置顶</view> -->
              <view class="info_publisher">{{ item.author }}</view
              >：
              <view class="info_publisher">{{
                item.created_at | moment("YYYY.MM.DD HH:mm:ss")
              }}</view>
            </view>
          </view>
          <view class="info_item_right">
            <image :src="item.image" mode="aspectFill" />
          </view>
        </view>
      </block>
      <graceLoading
        :loadingType="
          loading['mf.home.article_list']
            ? 1
            : articleList.has_next_page
            ? 0
            : 2
        "
      ></graceLoading>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      hotList: [
        {
          img:
            "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2915750864,3664532568&fm=26&gp=0.jpg",
          name: "file coin官方信息，一文了解全部信息",
        },
        {
          img:
            "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2915750864,3664532568&fm=26&gp=0.jpg",
          name: "file coin官方信息，一文了解全部信息",
        },
        {
          img:
            "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2915750864,3664532568&fm=26&gp=0.jpg",
          name: "file coin官方信息，一文了解全部信息",
        },
      ],
      infoList: [
        {
          title: "ETH2.0即将到来，你应该要了解这些事儿",
          img:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2297272305,3569659905&fm=26&gp=0.jpg",
          top: true,
          publisher: "云算力",
          date: "2020.11.12 11:00:00",
        },
        {
          title: "ETH2.0即将到来，你应该要了解这些事儿",
          img:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2297272305,3569659905&fm=26&gp=0.jpg",
          top: true,
          publisher: "云算力",
          date: "2020.11.12 11:00:00",
        },
        {
          title: "ETH2.0即将到来，你应该要了解这些事儿",
          img:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2297272305,3569659905&fm=26&gp=0.jpg",
          top: true,
          publisher: "云算力",
          date: "2020.11.12 11:00:00",
        },
      ],
    };
  },
  computed: {
    ...mapGetters("mf/home", ["articleHot", "articleList"]),
  },
  methods: {
    artcleDetail(id) {
      this.handleNavTo({ url: "/pages/mf/home/articleDetail?id=" + id });
    },
  },
};
</script>

<style scoped>
.info_content {
  width: 100%;
}
.info_hot {
  width: 100%;
  box-sizing: border-box;
  padding: 40rpx 0 30rpx;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.hot_title {
  font-size: 32rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 600;
  color: #fff;
  align-items: center;
  margin-bottom: 29rpx;
}
.hot_icon {
  width: 39rpx;
  height: 39rpx;
  margin-right: 20rpx;
  border-radius: 50%;
}
.hot_box {
  width: 100%;
}
.hot_item {
  width: 223rpx;
  margin-right: 20rpx;
}
.hot_item:last-child {
  margin-right: 0;
}
.hot_item_img {
  width: 100%;
  height: 125rpx;
  margin-bottom: 14rpx;
  border-radius: 10rpx;
}
.hot_item_title {
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 40rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.info_list {
  width: 100%;
  background-color: #121624;
}
.info_item {
  width: 100%;
  height: 227rpx;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 30rpx 0;
}
.info_item_left {
  box-sizing: border-box;
  padding: 12rpx 0 12rpx;
}
.info_item_right {
  width: 223rpx;
  height: 167rpx;
  margin-left: 30rpx;
}
.info_item_right image {
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
}
.info_item_title {
  height: 80rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 40rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.info_item_info {
  line-height: 42rpx;
}
.info_top {
  width: 84rpx;
  height: 42rpx;
  background: #015fff;
  border-radius: 6px;
  text-align: center;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  margin-right: 19rpx;
}
.info_publisher {
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #898989;
}
</style>